<template>
  <!-- 添加跟进信息 -->
  <el-dialog title="添加跟进信息" v-model="followParams.visible" width="640" :close-on-click-modal="false">
    <el-alert class="mb20" title="注意，跟进信息提交后无法更改删除" type="warning" show-icon />
    <div class="follow-main" v-loading="loading">
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="90px">
        <el-form-item label="跟进人" prop="followUp">
          <el-input v-model="formData.followUp" placeholder="请输入跟进人" class="bright">
            <template #append> <el-button icon="EditPen" /></template>
          </el-input>
        </el-form-item>
        <el-form-item label="跟进时间" prop="followTime">
          <el-date-picker v-model="formData.followTime" type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
            clearable placeholder="请选择跟进时间" style="width: 100%" />
        </el-form-item>
        <el-form-item label="标题" prop="followTitle">
          <el-input v-model.trim="formData.followTitle" maxlength="60" clearable placeholder="请输入标题" />
        </el-form-item>
        <el-form-item label="内容" prop="followContent">
          <el-input v-model.trim="formData.followContent" maxlength="60" show-word-limit
            :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="$emit('close')">返回</el-button>
        <el-button type="primary" :disabled="loading" @click="handleSubmit">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
// import { editFollow } from '@/pc/views/clues/api/clues'
import { format } from 'date-fns'
import { onMounted, reactive, ref, defineProps, defineEmits } from 'vue'
import { ElMessage } from 'element-plus'
defineProps({
  followParams: {
    type: Object,
    default: () => { },
    required: true
  }
})

const emits = defineEmits(['close'])
const ruleForm = ref(null)
const loading = ref(false)
const formData = reactive({
  followUp: '',
  followTime: '',
  followTitle: '',
  followContent: ''
})
const rules = reactive({
  followUp: [{ required: true, message: '请输入跟进人', trigger: 'blur' }],
  followTime: [{ required: true, message: '请选择跟进时间', trigger: 'change' }],
  followTitle: [{ required: true, message: '请输入标题', trigger: 'blur' }],
  followContent: [{ required: true, message: '请输入内容', trigger: 'blur' }]
})

const handleSubmit = () => {
  ruleForm.value.validate((valid) => {
    if (valid) {
      handleSave()
    } else {
      return false
    }
  })
}
const handleSave = () => {
  loading.value = true
  // const res = await editFollow({ ...this.formData, ...this.followParams.params })
  // loading.value = false
  // if (res?.code === 200) {
  //   ElMessage.success('新增成功')
  //   emits('close', true)
  // } else {
  //   ElMessage.error('异常')
  // }
  setTimeout(() => {
    emits('close', true)
    ElMessage.success('新增成功')
  }, 1000)
}

// 初始化
onMounted(() => {
  console.log(1)
  formData.followTime = format(new Date(), 'yyyy-MM-dd')
})

</script>

<style lang="scss" scoped>
.follow-main {}
</style>
